@charset "utf-8";

$fontsize:40;
@function r($px) {
    @return$px/$fontsize *1rem;
}
*{
    margin: 0;
    padding: 0;
    list-style: none;
    
}

html,body,.web{
    width: 100%;
    height: 100%;
}
.swiper-container{
    width: 100%;
    height: 100%
}
.page{
    width: 100%;
    height: 100%;
    text-align: center;
    font-size:r(40);
}

.page1{
    background: red;
    position: relative;
}
.daren{
    animation: ybz 2s both;
}
.page2{
    background: skyblue;
    
}
.page4{
//  background: deepskyblue;
    h3{
        color: black;
    }
}
.page5{
    background: deeppink;
    .tb{
        width: r(500);
        margin: 0 auto;
        margin-top: r(80);
        input{
            width: r(500);
            height: r(70);
            font-size: r(40);
            padding: r(10);
        }
    }
    .but{
        width: r(510);
        margin: 0 auto;
        margin-top: r(80);
        input{
            width: r(510);
            height: r(70);
        }
    }
    .tupp{
        width:r(300);
        margin: 0 auto;
        margin-top: r(50);
        img{
            width: 100%;
        }
    }
}
.page3{
    background: green;
    h3{
        color: white;
        font-size: r(20);
    }
}
.tup{
    width:50% ;
//  height: r(300);
    margin: 0 auto;
    margin-top: r(40);
    img{
        width: 100%;
    }
}
.shu{
    position: absolute;
    left:r(90);
    font-size: r(50);
    font-weight: 600;
    color: green;
    writing-mode:vertical-rl;
    top: 40%;
    animation: shu 2s both;
}

@keyframes ybz{
    0%{
        transform: translateY(-300px);
    }
    100%{
        transform: translateY(500px);
    }
    20%{
        transform: rotate(15deg);
    }
    30%{
        transform: rotate(-15deg);
    }
    40%{
        transform: rotate(15deg);
    }
    50%{
        transform: rotate(-15deg);
    }
    60%{
        transform: rotate(15deg);
    }
    70%{
        transform: rotate(-15deg);
    }
    90%{
        transform: rotate(15deg);
    }
    100%{
        transform: translateX(-50px);
    }
}
h1{
    font-size: r(80);
    margin-top: r(60);
    color: white;
}
h2{
    color: white;
    margin-top: r(30);
}
h3{
    font-size: r(70);
    color: green;
    margin-top: r(50);
}
.shu2{
    width: r(510);
    margin: 0 auto;
    font-size: r(60);
    margin-top: r(200);
    color: skyblue;
    animation: shu2 3s both;
    
}
.yy{
    width: r(50);
    height: r(50);
    position: absolute;
    right: r(30);
    top: r(80);
    img{
        width: 100%;
    }
}
.zi{
    animation: zi 1s both;
}
.zit{
    animation: zit 0.3s both;
}
@keyframes zi{
    0%{
        transform: translateX(-300px);
    }
    20%{
        transform: rotate(720deg);
    }
    50%{
        transform: rotateZ(180deg);
    }
    100%{
        transform: translateX(0);
    }
}
@keyframes zit{
    0%{
        transform: translateX(300px);
    }
    20%{
        transform: rotate(720deg);
    }
    50%{
        transform: rotateZ(180deg);
    }
    100%{
        transform: translateX(0);
    }
}
@keyframes shu{
    0%{
        transform: translateY(500px);
    }
}
@keyframes shu2{
    0%{
        transform: translateX(-300px) ;
    }
    10%{
        transform: rotateX(10deg);
    }
    20%{
        transform: rotateY(360deg);
    }
    50%{
        transform: rotateY(-360deg);
    }
    100%{
        transform: translateX(0) rotateX(30deg);
    }
}

.rc{
    font-size: r(50);
    margin-top: r(60);
    animation: rc 2s both;
    color: red;
}
@keyframes lc{
    0%{
        transform: translateX(-1000px);
    }
    100%{
        transform: translate(0px);
    }
}
@keyframes rc{
    0%{
        transform: translateX(800px);
    }
    100%{
        transform: translate(0);
    }
}
.lc{
    width: r(600);
    margin: 0 auto;
    margin-top: r(60);
    animation: lc 2s both;
    img{
        width: 100%;
    }
}
